<template>
    <Form ref="formValidate" :model="userInfo" :rules="ruleValidate" :label-width="150" style="width:70%;margin-left:15%;">
        <FormItem label="编号">
            <Input v-model="userInfo.number" readonly></Input>       
        </FormItem>
        <FormItem :label="role" prop="enterprise_name"  v-if= "enterprise_role">
            <Input v-model="userInfo.enterprise_name" placeholder="名称"></Input>
        </FormItem>
        <Card v-if= "enterprise_role" style="margin-left:20%;margin-bottom:20px;">
            <div style="color:red;padding-bottom:5px;">
                <Button @click="handleGetGSXTInfo">获取注册信息</Button>
                <span style="padding-left:5px;">若系统无法自动获取请手动填写</span>
            </div>
            <FormItem label="统一社会信用代码" prop="usci">
                <Input v-model="userInfo.usci" placeholder="统一社会信用代码"></Input>
            </FormItem>
            <FormItem label="注册资本" prop="registered_capital">
                <InputNumber :min="1" v-model="userInfo.registered_capital"></InputNumber>
            </FormItem>
            <FormItem label="营业执照注册号" prop="business_licence">
                <Input v-model="userInfo.business_licence" placeholder="营业执照注册号"></Input>
            </FormItem>
        </Card>
        <FormItem :label="intro" prop="enterprise_profile" v-if = "enterprise_role">
            <Input v-model="userInfo.enterprise_profile" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="简介..."></Input>
        </FormItem>
        <FormItem label="企业类型" prop="member_type" v-if= "campany_role" >
            <Select v-model="userInfo.member_type" style="width:200px">
                <Option v-for="item in tree.company_type.children" :value="item.name" :key="item.id">{{ item.name }}</Option>
            </Select>        
        </FormItem>
        <FormItem label="服务机构类型" prop="member_type" v-if= "enterprise" >
            <Select v-model="userInfo.member_type" style="width:200px">
                <Option v-for="item in tree.service_agency.children" :value="item.name" :key="item.id">{{ item.name }}</Option>
            </Select>        
        </FormItem>
        <FormItem label="所在地区" prop="area" v-if= "enterprise_role" >
            <Row>
                <Col span="24">
                    <al-selector v-model="userInfo.area" data-type="name" level="3"/>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="详细地址" prop="address" v-if= "enterprise_role">
            <Input v-model="userInfo.address" placeholder="详细地址"></Input>
        </FormItem>
        <FormItem label="坐标" prop="coordinate" v-if= "enterprise_role">
            <RemoteJS src="https://api.map.baidu.com/getscript?v=2.0&ak=s0WXyAMDZRCfMPUoRKqv6d0o0Tivg7Rn&services=&t=20181212102408&s=1" name="BMap" @on-loaded="handleMapLoaded"></RemoteJS>
            <label class="col-xs-8 control-label" style="padding-right: 0px;color:red;">操作提示：左键移动，中键缩放地图，<strong>单击右键选址！</strong></label>
            <div id="member-coordinate" style="width:100%;height:300px;"></div>
            <p style="color:red;">选择结果：经度{{ userInfo.coordinate[0] }}，纬度{{ userInfo.coordinate[1] }}</p>
        </FormItem>
        <FormItem label="营业执照照片" v-if= "enterprise_role">
            <Row :gutter="16">
                <Col span="12">
                    <Card>
                        <img :src="userInfo.business_licence_pic.dataUrl" style="width:100%"/>
                    </Card>
                </Col>
                <Col span="6">
                    <ImageEditor v-model="userInfo.business_licence_pic"></ImageEditor>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="Logo" v-if= "enterprise_role">
            <Row :gutter="16">
                <Col span="12">
                    <Card>
                        <img :src="userInfo.logo.dataUrl" style="width:100%"/>
                    </Card>
                </Col>
                <Col span="6">
                    <ImageEditor v-model="userInfo.logo"></ImageEditor>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="联系人姓名" prop="name">
            <Input v-model="userInfo.name" placeholder="姓名"></Input>
        </FormItem>
        <FormItem label="身份证号" prop="identity_card" >
            <Input v-model="userInfo.identity_card" placeholder="身份证号" ></Input>
        </FormItem>
        <Tooltip content="想要修改手机号码请到手机换绑">
            <FormItem label="手机号" prop="mobile_phone" >
                <Input v-model="userInfo.mobile_phone" placeholder="手机号" readonly></Input>
            </FormItem>
        </Tooltip>
        <FormItem label="部门" prop="department" v-if= "enterprise_role ">
            <Input v-model="userInfo.department" placeholder="部门"></Input>
        </FormItem>
        <FormItem >
            <div class="btnsty">
                <Button type="primary" @click="handleSubmit('formValidate')" >提交</Button>
            </div>
        </FormItem>
    </Form>
</template>
<script>
    import Vue from 'vue';
    import Member from '@/common/model/Member';
    import ImageEditor from "../main-components/image-editor/image-editor.vue";
    import Cookies from 'js-cookie';
    import RemoteJS from '@/common/components/RemoteJS';

    export default {
        name: 'Me',
        props: {
            value: {
                type: Object
            }
        },
        components: {
            ImageEditor, RemoteJS
        },
        data () {
            const validateArea = (rule, value, callback)=>{
                if(this.userInfo.area.length < 2){
                    callback(new Error("请选择所属地区！"));
                }else{
                    callback();
                }
            };
            const validateIdcard = (rule, value, callback) => {
                var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if(!reg.test(value)) {
                    callback(new Error("请输入正确格式的身份证号！"));
                }else {
                    callback();
                }
            };
            return {
                enterprise_role: false,
                campany_role:false,
                enterprise:false,
                role: '',
                intro: '',
                ruleValidate: {
                    enterprise_name:[
                        { required: true, message: '名称不能为空！' ,trigger: 'blur'},
                    ],
                    name: [
                        { required: true, message: '姓名不能为空！', trigger: 'blur'}
                    ],
                    email: [
                        { required: true, message: '邮箱不能为空！', trigger: 'blur' },
                        { type: 'email', message: '请输入正确格式的邮箱!', trigger: 'blur' }
                    ],
                    area: [
                        { required: true, validator: validateArea, trigger: 'change' }
                    ],
                    usci: [
                        { required: true, message: '统一社会信用代码不能为空！', trigger: 'blur'}
                    ],
                    identity_card: [
                        { required :true ,message: '身份证号不能为空！',trigger: 'blur'},
                        { validator:validateIdcard, trigger: 'blur'}
                    ],
                    enterprise_profile: [
                        { required: true, message: '企业简介不能为空！', trigger: 'blur'}
                    ]

                }
            }
        },
        methods: {
            confirm(content, okFunc) {
                this.$Modal.confirm({
                    title: '提示',
                    content: content,
                    okText: '确认',
                    cancelText: '取消',
                    onOk:async()=>{
                        okFunc();
                    }
                })
            },
            updateInfo() {
                this.api.post("member/update_me", this.userInfo.serialize(), res => {
                    this.$CustomMessage.success('更新成功!');
                    this.$emit("on-modify", this.userInfo);
                    location.reload();
                });
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.userInfo.status == 2) {
                            this.confirm('更新基本信息将会使您的账户重置为正在审核状态，这将会影响部分功能的使用，您确认要更新基本信息吗？', () => {
                                this.updateInfo();
                            });
                        }else {
                            this.updateInfo();
                        }
                    } else {
                        this.$CustomMessage.error('请按要求将信息填写完整！');
                    }
                })
            },
            handleGetGSXTInfo() {
                this.api.post("member/get_gsxt_info", this.userInfo.serialize(), res => {
                    this.userInfo.usci = res.data.usci;
                    this.userInfo.registered_capital = res.data.registered_capital;
                    this.userInfo.business_licence = res.data.business_licence;
                });
            },
            handleMapLoaded(BMap) {
                var map = new BMap.Map("member-coordinate");
                var point = null;
                if(this.userInfo.coordinate.length == 2) {
                    point = new BMap.Point(this.userInfo.coordinate[0], this.userInfo.coordinate[1]);
                    map.addOverlay(new BMap.Marker(point));
                }else {
                    point = new BMap.Point(119.60436762, 39.94546157);
                }
                map.centerAndZoom(point, 11);
                map.enableScrollWheelZoom(true);
                map.addEventListener('mouseup', e => {
                    if(e.domEvent.button == 2) {
                        var marker = new BMap.Marker(e.point);
                        map.clearOverlays();
                        map.addOverlay(marker);
                        this.userInfo.coordinate = [e.point.lng, e.point.lat];
                    }
                });
            }
        },
        computed:{
            emailSign() {
                if(this.userInfo.is_email_authed)
                {
                    return true;
                }else {
                    return false;
                }
            },
            tree () {
              return this.$store.state.app.dicTree;  
            },
            userInfo() {
                var info = this.value;
                if (info.role_type === 4) {
                    this.enterprise_role = true;
                    this.campany_role = true;
                    this.role="企业名称";
                    this.intro="企业简介";
                }else if(info.role_type === 5) {
                    this.enterprise_role = true;
                    this.enterprise = true;
                    this.role="服务机构名称";
                    this.intro="服务机构简介";
                }
                return info;
            }
        }
    }
</script>
<style scoped>
.ivu-btn, .ivu-btn:active, .ivu-btn:focus {
    outline: 0;
}
.btnsty{
    width: 150px;
    margin: 0 auto; 
}
</style>
